<template>
  <div class="login">
    <!-- 背景图片 -->
    <div
      :style="`background:url(${bgi1}) center center no-repeat;background-size: contain contain`"
      class="backgroundImg"
    >
      <!-- 表单tab栏目 -->
      <el-row type="flex" justify="center" align="middle" class="loginBox">
        <div class="form">
          <div class="formTabs">
            <div
              class="formTabs_item"
              v-for="(item,index) in ['登 录','注 册']"
              :key="index"
              @click="changeTab(index)"
              :class="{active:currentTab==index}"
            >
              <div>{{ item }}</div>
            </div>
          </div>

          <!-- 登录组件 -->
          <loginForm v-if="currentTab==0" />

          <!-- 注册组件 -->
          <!-- 通过子组件发射，父组件接受并执行将0赋值给tab展示登录页 -->
          <registerForm @goToLogin="currentTab = 0" v-if="currentTab==1" />
        </div>
      </el-row>
    </div>
  </div>
</template>

<script>
import bgi1 from "@/static/bgi1.jpg";
import loginForm from "@/components/user/loginForm";
import registerForm from "@/components/user/registerForm";

export default {
  components: {
    loginForm,
    registerForm
  },

  data() {
    return {
      bgi1,
      currentTab: 0
    };
  },

  methods: {
    changeTab(index) {
      this.currentTab = index;
    }
  }
};
</script>

<style lang="less" scoped>
.login {
  min-width: 1000px;
  margin: 0 auto;
  position: relative;
  height: 580px;

  .backgroundImg {
    width: 100%;
    height: 100%;

    .loginBox {
      flex-direction: column;
      height: 100%;

      .form {
        display: flex;

        .formTabs {
          &_item {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgba(0, 0, 0, 0.2);
            width: 70px;
            height: 220px;
            line-height: 40px;
            font-weight: 700;
            font-size: 18px;
            border-radius: 16px 0 0 0;

            &:last-child {
              border-radius: 0 0 0 16px;
            }

            div {
              width: 20px;
            }
          }

          .active {
            background-color: rgba(235, 229, 228, 0.5);
          }
        }
      }
    }
  }
}
</style>